<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Product Landing Page - MacBook</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<header id="header">
    <nav id="nav-bar">
        <ul>
            <li><img id="header-img" alt="Apple.inc" src="./img/apple.svg"></li>
            <li><a class="nav-item nav-link" href="#footer-title"><span>Apple</span></a></li>
            <li><a class="nav-item" href="#"><span>Store</span></a></li>
            <li><a class="nav-item nav-link" href="#model-pic"><span>Mac</span></a></li>
            <li><a class="nav-item" href="#"><span>iPad</span></a></li>
            <li><a class="nav-item" href="#"><span>iPhone</span></a></li>
            <li><a class="nav-item" href="#"><span>Watch</span></a></li>
            <li><a class="nav-item" href="#"><span>AirPods</span></a></li>
            <li><a class="nav-item" href="#"><span>TV &amp; Home</span></a></li>
            <li><a class="nav-item nav-link" href="#gift"><span>Only on Apple</span></a></li>
            <li><a class="nav-item" href="#"><span>Accessories</span></a></li>
            <li><a class="nav-item" href="#"><span>Support</span></a></li>
        </ul>
    </nav>
</header>
<main>
    <section class="banner">
        <figure>
            <figcaption>
                <h3 id="new" class="title">New</h3>
                <h2 class="title">MacBook Pro</h2>
                <h1 id="title" class="title">Supercharged for pros.</h1>
                <h3 id="price" class="title">From $1999</h3>
                <button id="buy" class="blue-button">Buy</button>
                <a class="title learn-more" href="https://www.youtube.com/watch?v=9tobL8U7dQo&t=11s">
                    Learn more >
                </a>
            </figcaption>
            <img src="./img/banner.jpg" alt="MacBook Pro">
        </figure>
    </section>

    <section class="model">
        <h1 id="which-mac">Which Mac is right for you?</h1>
        <div id="model-pic">
            <div id="model-pic-mba" class="model-pic split-line">
                <img class="model-img" src="./img/model-mba.png" alt="MacBook Air">
                <img class="model-img-color-mba" src="./img/color-mba.png" alt="MacBook Air Color">
                <h3 class="model-pic-title">MacBook Air</h3>
                <p class="model-pic-price">From $999</p>
                <button class="model-pic-buy blue-button">Buy</button>
                <a class="model-pic-link learn-more">Learn more ></a>
            </div>
            <div id="model-pic-mbp13" class="model-pic split-line">
                <img class="model-img" src="./img/model-mbp13.png" alt="MacBook Pro 13">
                <img class="model-img-color-mbp" src="./img/color-mbp.png" alt="MacBook Pro 13 Color">
                <h3 class="model-pic-title">MacBook Pro 13"</h3>
                <p class="model-pic-price">From $999</p>
                <button class="model-pic-buy blue-button">Buy</button>
                <a class="model-pic-link learn-more">Learn more ></a>
            </div>
            <div id="model-pic-mbp14" class="model-pic split-line">
                <img class="model-img" src="./img/model-mbp14.png" alt="MacBook Pro 14">
                <img class="model-img-color-mbp" src="./img/color-mbp.png" alt="MacBook Pro 14 Color">
                <h3 class="model-pic-title">MacBook Pro 14"</h3>
                <p class="model-pic-price">From $999</p>
                <button class="model-pic-buy blue-button">Buy</button>
                <a class="model-pic-link learn-more">Learn more ></a>
            </div>
        </div>
    </section>

    <section class="params">

        <div class="mba-chip cell">
            <figure>
                <img src="./img/cpu.png" alt="CPU">
            </figure>
            <p>Apple M1 chip</p>
        </div>
        <div class="mba-cpu cell">
            <h4>8-core</h4>
            <p>CPU</p>
        </div>
        <div class="mba-gpu cell">
            <h4>8-core</h4>
            <p>GPU</p>
        </div>
        <div class="mba-memory cell">
            <figure><img src="./img/memory.png" alt="Memory"></figure>
            <p>Up to 16GB <br>unified memory</p>
        </div>
        <div class="mba-storage cell">
            <h4>2TB</h4>
            <p>Maximum configurable storage<sup><a>1</a></sup></p>
        </div>
        <div class="mba-display cell">
            <h4>13.3”</h4>
            <p>Retina display<sup><a>2</a></sup></p>
        </div>
        <div class="mba-battery cell">
            <figure><img src="./img/battery.png" alt="Battery"></figure>
            <p>Up to 18 hours battery&nbsp;life<sup><a>3</a></sup></p>
        </div>
        <div class="mba-camera cell">
            <figure><img src="./img/camera.png" alt="Camera"></figure>
            <p>720p FaceTime&nbsp;HD camera</p>
        </div>
        <div class="mba-weight cell">
            <h4>2.8 lb.</h4>
            <p>Weight</p>
        </div>
        <div class="mba-keyboard cell split-line">
            <figure><img src="./img/touchid.png" alt="Touch ID"></figure>
            <p>Touch ID</p>
        </div>
        <div class="mbp-chip cell">
            <figure>
                <img src="./img/cpu.png" alt="CPU">
            </figure>
            <p>Apple M1 chip</p>
        </div>
        <div class="mbp-cpu cell">
            <h4>8-core</h4>
            <p>CPU</p>
        </div>
        <div class="mbp-gpu cell">
            <h4>8-core</h4>
            <p>GPU</p>
        </div>
        <div class="mbp-memory cell">
            <figure><img src="./img/memory.png" alt="Memory"></figure>
            <p>Up to 16GB <br>unified memory</p>
        </div>
        <div class="mbp-storage cell">
            <h4>2TB</h4>
            <p>Maximum configurable storage<sup><a>1</a></sup></p>
        </div>
        <div class="mbp-display cell">
            <h4>13.3”</h4>
            <p>Retina display<sup><a>2</a></sup></p>
        </div>
        <div class="mbp-battery cell">
            <figure><img src="./img/battery.png" alt="Battery"></figure>
            <p>Up to 20 hours battery&nbsp;life<sup><a>4</a></sup></p>
        </div>
        <div class="mbp-camera cell">
            <figure><img src="./img/camera.png" alt="Camera"></figure>
            <p>720p FaceTime&nbsp;HD camera</p>
        </div>
        <div class="mbp-weight cell">
            <h4>3.0 lb.</h4>
            <p>Weight</p>
        </div>
        <div class="mbp-keyboard cell split-line">
            <figure><img src="./img/touchid.png" alt="Touch ID"></figure>
            <p>Touch Bar and Touch&nbsp;ID</p>
        </div>
        <div class="mbp14-chip cell">
            <figure>
                <img src="./img/cpu.png" alt="CPU">
            </figure>
            <p>Apple&nbsp;M1&nbsp;Pro&nbsp;chip or <br>Apple&nbsp;M1&nbsp;Max&nbsp;chip</p>
        </div>
        <div class="mbp14-cpu cell">
            <h4>10-core</h4>
            <p>CPU</p>
        </div>
        <div class="mbp14-gpu cell">
            <h4>32-core</h4>
            <p>GPU</p>
        </div>
        <div class="mbp14-memory cell">
            <figure><img src="./img/memory.png" alt="Memory"></figure>
            <p>Up to 64GB <br>unified memory</p>
        </div>
        <div class="mbp14-storage cell">
            <h4>8TB</h4>
            <p>Maximum configurable storage<sup><a>1</a></sup></p>
        </div>
        <div class="mbp14-display cell">
            <h4>14.2” or 16.2”</h4>
            <p>Liquid Retina XDR display<sup><a>2</a></sup></p>
        </div>
        <div class="mbp14-battery cell">
            <figure><img src="./img/battery.png" alt="Battery"></figure>
            <p>Up to 21 hours battery&nbsp;life<sup><a>5</a></sup></p>
        </div>
        <div class="mbp14-camera cell">
            <figure><img src="./img/camera.png" alt="Camera"></figure>
            <p>1080p FaceTime&nbsp;HD camera</p>
        </div>
        <div class="mbp14-weight cell">
            <h4>3.5 lb. or 4.7 lb.</h4>
            <p>Weight</p>
        </div>
        <div class="mbp14-keyboard cell split-line">
            <figure><img src="./img/touchid.png" alt="Touch ID"></figure>
            <p>Touch&nbsp;ID</p>
        </div>
    </section>

    <section class="gift">
        <img id="gift" src="./img/gift.png" alt="Gift">
        <h1 id="great-gift">Let the holidays be filled with great gifts.</h1>
        <a id="shop-now" class="learn-more">Shop Now ></a>
        <img id="holiday" src="./img/holiday.png" alt="Holiday">
    </section>

    <section class="form">
        <form id="form" action="https://www.freecodecamp.com/email-submit">
            <label for="email"></label>
            <input type="email" id="email" name="email" placeholder="Email" required>
            <input id="submit" type="submit" value="Get Started" class="start"/>
        </form>
    </section>
</main>
<footer>
    <h3 id="footer-name">macOS Monterey</h3>
    <h1 id="footer-title">High powered meets “Hi everyone.”</h1>
    <div class="footer-link">
        <a href="#">Update now ></a>
        <a href="#">Learn more ></a>
    </div>
    <iframe
            id="video"
            height="315"
            src="https://www.youtube-nocookie.com/embed/9tobL8U7dQo?rel=0&amp;controls=0&amp;showinfo=0"
            allowfullscreen
    ></iframe>
</footer>
<!--<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>-->
<script>
    const projectName = 'product-landing-page';
    const env = 'LOCAL'    // LOCAL | CLOUD
    const dirName = 'Product-Landing-Page'
    const cloudPath = 'https://raw.githubusercontent.com/louisyoungx/freeCodeCamp-projects/master/' + dirName + '/img/';
    (function cloudPics() {
        function chore() {
            document.querySelectorAll('img').forEach(img => {
                console.log(img.getAttribute('src'))
                let src = img.getAttribute('src').replace('./img/', cloudPath)
                img.setAttribute('src', src)
            });
        }
        if (env === 'CLOUD') {
            chore()
        }
    })()
</script>
</body>
</html>